import React from "react";
import PageView from "@/components/base/page";
import { TouchableOpacity, View } from "react-native-ui-lib";
import { AppSettingCardItemsProps, SettingCard } from "@/components/settings/setting.card";
import { Ionicons } from "@expo/vector-icons";
import { useColor } from "@/hooks/color";
import BarUser from "@/components/base/bar.user";
import { useSelector } from "react-redux";
import { RootState } from "@/stores";
import { IUserArguments } from "@/stores/bases/user";
import { useTranslation } from "react-i18next";
import { router } from "expo-router";

const userMine = () => {
  const user = useSelector<RootState, IUserArguments>(state => state.user);
  const onPressByUserCard = () => router.push({ pathname: "/(modal)/messageInfo" });

  const settingsItems: Array<Array<AppSettingCardItemsProps>> = [
    [
      { name: useTranslation().t("2001"), icon: "document-text-outline" },
      { name: useTranslation().t("2002"), icon: "megaphone-outline" },
      { name: useTranslation().t("2003"), icon: "phone-portrait-outline" },
      { name: useTranslation().t("2004"), icon: "clipboard-outline" },
    ],
    [{ name: useTranslation().t("2005"), icon: "receipt-outline" }],
    [
      { name: useTranslation().t("2006"), icon: "help-circle-outline" },
      { name: useTranslation().t("2007"), icon: "finger-print-outline" },
    ],
  ];

  return (
    <PageView>
      <View flex centerH>
        <View className='flex flex-row justify-between w-full rounded-xl px-2 items-center py-2'>
          <BarUser user={user} />
          <TouchableOpacity onPress={onPressByUserCard}>
            <Ionicons name='mail-open-outline' size={24} color={useColor().color.search} />
          </TouchableOpacity>
        </View>
        <SettingCard items={settingsItems} />
      </View>
    </PageView>
  );
};

export default userMine;
